<template>
    <div>
        <Nav></Nav>
        <v-title>订单支付</v-title>
        <el-row>
            <el-col :span="6" :offset="4">
                <h2>开始支付</h2>
            </el-col>
        </el-row>
        <el-row class="order">
            <div>
                <div>
                    <div>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>订单编号：{{orderInfo.order.orderSn}}</span>
                            </div>
                            <br />
                            <div>
                                <el-steps :active="2">
                                    <el-step title="步骤 1" description="填写订单信息"></el-step>
                                    <el-step title="步骤 2" description="开始支付"></el-step>
                                    <el-step title="步骤 3" description="支付完成"></el-step>
                                </el-steps>
                            </div>
                            <div class="text item">
                                <el-divider content-position="left">支付</el-divider>
                                <el-row>
                                    <el-col :span="18" :offset="3">
                                    扫描二维码没有设置跳转，但会改支付成功的状态，目前只是设置本机地址
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="6" :offset="7">
                                        <qrcode :value="orderInfo.order.payUrl" :options="qrcode_options" />
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="3" :offset="9">
                                        <span>支付：</span>
                                    </el-col>
                                    <el-col :span="4">
                                        <span class="detailContentPrice">￥{{orderInfo.order.totalPrice}}</span>
                                    </el-col>
                                </el-row>
                                <br />
                                <el-row>
                                    <el-col :span="4" :offset="7">
                                        <el-button type="primary" round @click="pay">模拟扫码支付</el-button>
                                    </el-col>
                                    <el-col :span="4" :offset="2">
                                        <el-button type="fail" round @click="cancelPay">取消支付</el-button>
                                    </el-col>
                                </el-row>
                                <el-divider content-position="left">个人信息部分</el-divider>
                                <div>
                                    <el-row>
                                        <el-col :span="4" :offset="2">
                                            <span class="detailContent">用户名</span>
                                        </el-col>
                                        <el-col :span="6">
                                            <span class="detailContentNormal">{{userInfo.username}}</span>
                                        </el-col>
                                    </el-row>
                                    <br />
                                    <el-row>
                                        <el-col :span="4" :offset="2">
                                            <span class="detailContent">收件人</span>
                                        </el-col>
                                        <el-col :span="6">
                                            <span class="detailContentNormal">{{userInfo.nickname}}</span>
                                        </el-col>
                                    </el-row>
                                    <br />
                                    <el-row>
                                        <el-col :span="4" :offset="2">
                                            <span class="detailContent">地址</span>
                                        </el-col>
                                        <el-col :span="14">
                                            <span class="detailContentNormal">{{orderInfo.order.address}}</span>
                                        </el-col>
                                    </el-row>
                                    <br />
                                    <el-row>
                                        <el-col :span="4" :offset="2">
                                            <span class="detailContent">备注</span>
                                        </el-col>
                                        <el-col :span="14">
                                            <span class="detailContentNormal">{{orderInfo.order.remark}}</span>
                                        </el-col>
                                    </el-row>
                                    <br />
                                    <el-row>
                                        <el-col :span="4" :offset="2">
                                            <span class="detailContent">支付方式</span>
                                        </el-col>
                                        <el-col :span="14">
                                            <span class="detailContentNormal" v-if="orderInfo.order.payType==1">微信支付</span>
                                            <span class="detailContentNormal" v-if="orderInfo.order.payType==2">支付宝支付</span>
                                        </el-col>
                                    </el-row>
                                </div>
                                <el-divider content-position="left">商品信息部分</el-divider>
                                <div v-for="(orderGoods, key) in orderInfo.orderDetail" v-bind:key="key">
                                    <el-row>
                                        <el-col :span="6" :offset="2"><img :src="orderGoods.img" width="250"
                                                height="192" /></el-col>
                                        <el-col :span="12" :offset="4">
                                            <el-row>
                                                <span class="spanName">{{orderGoods.name}}</span>
                                            </el-row>
                                            <br />
                                            <el-row>
                                                <el-col :span="4">
                                                    <span class="detailContent">价格</span>
                                                </el-col>
                                                <el-col :span="6">
                                                    <span class="detailContentPrice">￥{{orderGoods.price}}</span>
                                                </el-col>
                                            </el-row>
                                            <br />
                                            <el-row>
                                                <el-col :span="4">
                                                    <span class="detailContent">数量</span>
                                                </el-col>
                                                <el-col :span="6">
                                                    <span class="detailContentNum">{{orderGoods.num}}</span>
                                                </el-col>
                                            </el-row>
                                            <br />
                                        </el-col>
                                    </el-row>
                                    <el-divider />
                                </div>
                            </div>
                            <el-row>
                                <el-col :span="2" :offset="18">
                                    总价：
                                </el-col>
                                <el-col :span="4">
                                    <span class="detailContentPrice">￥{{orderInfo.order.totalPrice}}</span>
                                </el-col>
                            </el-row>
                            <br />
                            <!-- <el-row>
                                <el-col :offset="19">
                                    <el-col :md="24">
                                        <el-button type="success" round @click="takeOrder"></el-button>
                                    </el-col>
                                </el-col>

                            </el-row> -->
                        </el-card>
                        <br /><br />
                    </div>
                </div>
                <el-backtop />
            </div>
        </el-row>
    </div>
</template>

<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import { getGameGoodsDetail, payOrder, getOrderDetail } from "@/api/index";
import VueQrcode from '@chenfengyuan/vue-qrcode'
export default {
    created() {
        this.createOrder()
    },
    data() {
        return {
            orderInfo: {
                "order": {
                    "actualPrice": 0,
                    "address": "string",
                    "orderSn": "string",
                    "payType": 0,
                    "payUrl": "string",
                    "remark": "string",
                    "status": 0,
                    "totalPrice": 0,
                },
                "orderDetail": [
                    {
                        "num": 0,
                        "orderSn": "string",
                        "orderSubSn": "string",
                        "price": 0,
                        "refundStatus": 0,
                    }
                ]
            },
            userInfo: this.$store.state.user.user,
            qrcode_options: {
                width: 300,
                color: { dark: '#666' }
            }
        };
    },
    components: {
        Nav,
        VTitle,
        [VueQrcode.name]: VueQrcode
    },
    methods: {
        async createOrder() {
            if (this.$route.query.param.orderSn == null || this.$route.query.param.orderSn == '') {
                this.$message.error("别调皮~现在不能生成订单噢~")
                this.$router.push("/myOrder")
                return;
            }
            let that = this;

            await getOrderDetail(this.$route.query.param.orderSn).then(async (res) => {
                if (res.code == "200") {
                    let result = res.data
                    //goodsInfo
                    for (var i = 0; i < res.data.orderDetail.length; i++) {
                        await getGameGoodsDetail(res.data.orderDetail[i].gameGoodsId).then(res => {
                            if (res.code == "200") {
                                result.orderDetail[i].img=res.data.mainPicUrl
                                result.orderDetail[i].name=res.data.name
                            } else {
                                this.$message.error(res.msg);
                                return;
                            }
                        })
                    }
                    that.orderInfo = result
                } else {
                    this.$message.error(res.msg);
                    return;
                }
            });

        },
        async pay() {
            let param = {
                orderSn: this.orderInfo.order.orderSn,
                show: 1
            }
            await payOrder(this.orderInfo.order.orderSn, 2).then((res) => {
                if (res.code == "200") {
                    this.$router.push({
                        path:'/createOrderStep3',
                        query:{
                            param
                        }
                    })
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        async cancelPay() {
            //orderInfo.order.payUrl
            let param = {
                orderSn: this.orderInfo.order.orderSn,
                show: 2
            }

            await payOrder(this.orderInfo.order.orderSn, 1).then((res) => {
                if (res.code == "200") {
                    this.$router.push({
                        path:'/createOrderStep3',
                        query:{
                            param
                        }
                    })
                } else {
                    this.$message.error(res.msg);
                }
            });

        }
    }
}
</script>

<style lang="less" scoped>
h2 {
    float: left;
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    position: relative;
    margin-bottom: 20px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}

.order {
    width: 50%;
    margin-left: 25%;
}

.spanName {
    font-size: 25px;
    color: #2abaca;
    font-weight: bolder;
}

.old-name {
    color: #000;
}

.detailContent {
    font-size: 12px;
    line-height: 20px;
    display: block;
    color: #9497a0;
}

.detailContentPrice {
    font-size: 16px;
    line-height: 20px;
    display: block;
    color: red;
    font-weight: bold;
}

.detailContentNum {
    font-size: 16px;
    line-height: 20px;
    display: block;
    color: black;
    font-weight: bold;
}

.detailContentNormal {
    font-size: 16px;
    line-height: 20px;
    display: block;
    color: black;
}
</style>